<template>
  <div id="app">
    <hr>
    <!-- 传统做法 -->
    <h2>oldNameInfo:{{oldNameInfo}}</h2>
    <h2>oldAgeInfo:{{oldAgeInfo}}</h2>
    <hr>
    <!-- 使用mapGetters封装的函数拿到getters -->
    <h2>nameInfo:{{nameInfo}}</h2>
    <h2>ageInfo:{{ageInfo}}</h2>
    <hr>
  </div>
</template>

<script>
import { useGetters } from "../hooks/useGetters";
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";
export default {
  setup() {
    const store = useStore();

    // 传统方式
    const oldNameInfo = computed(() => store.getters.nameInfo);
    const oldAgeInfo = computed(() => store.getters.ageInfo);
    // 使用mapGetters封装的函数拿到getters
    // 使用方法一：
    const storeGetters1 = useGetters(["nameInfo", "ageInfo"]);
    return {
      oldNameInfo,
      oldAgeInfo,
      ...storeGetters1,
    };
  },
};
</script>

<style lang="less">
#app {
  text-align: center;
}
</style>
